<template>
	<view class="container">
		<!-- 顶部操作栏 -->
		<view class="header-section">
			<view class="header-info">
				<text class="header-title">轮播图管理</text>
				<text class="header-subtitle">管理小程序首页轮播广告</text>
			</view>
			<view class="header-actions">
<!--				<button class="test-btn" @click="testApiConnection">测试连接</button>-->
				<button class="add-btn" @click="showAddModal">添加轮播图</button>
			</view>
		</view>

		<!-- 轮播图列表 -->
		<view class="banner-list">
			<view class="banner-item" v-for="banner in bannerList" :key="banner.id">
				<view class="banner-preview">
					<image class="banner-image" :src="banner.imageUrl" mode="aspectFill"></image>
					<view class="banner-overlay">
						<view class="banner-status" :class="banner.status === 1 ? 'active' : 'inactive'">
							{{ banner.status === 1 ? '已上架' : '已下架' }}
						</view>
					</view>
				</view>

				<view class="banner-info">
					<view class="banner-details">
						<text class="banner-name">{{ banner.imageName || '轮播图' }}</text>
						<text class="banner-order">排序: {{ banner.sortOrder }}</text>
						<text class="banner-time">{{ formatDate(banner.uploadTime) }}</text>
					</view>

					<view class="banner-actions">
						<button class="action-btn edit-btn" @click="editBanner(banner)">编辑</button>
						<button class="action-btn toggle-btn" @click="toggleBannerStatus(banner.id)">
							{{ banner.status === 1 ? '下架' : '上架' }}
						</button>
						<button class="action-btn delete-btn" @click="deleteBanner(banner.id)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加/编辑轮播图弹窗 -->
		<view class="modal-overlay" v-if="showModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">{{ isEdit ? '编辑轮播图' : '添加轮播图' }}</text>
					<view class="close-btn" @click="closeModal">
						<text class="close-icon">×</text>
					</view>
				</view>

				<view class="modal-body">
					<!-- 图片上传 -->
					<view class="upload-section">
						<view class="upload-area" @click="chooseImage" v-if="!formData.imageUrl">
							<text class="upload-icon">📷</text>
							<text class="upload-text">点击选择图片</text>
							<text class="upload-tip">建议尺寸: 900x383px</text>
						</view>
						<view class="image-preview" v-else>
							<image class="preview-image" :src="formData.imageUrl" mode="aspectFit"></image>
							<view class="image-actions">
								<button class="change-btn" @click="chooseImage">更换图片</button>
							</view>
						</view>
					</view>

					<!-- 表单字段 -->
					<view class="form-item">
						<text class="label">图片名称</text>
						<input
							class="input"
							v-model="formData.imageName"
							placeholder="请输入图片名称"
							placeholder-class="placeholder"
						/>
					</view>

					<view class="form-item">
						<text class="label">排序顺序</text>
						<input
							class="input"
							v-model="formData.sortOrder"
							placeholder="请输入排序顺序（数字越小越靠前）"
							placeholder-class="placeholder"
							type="number"
						/>
					</view>

					<view class="form-item">
						<text class="label">状态</text>
						<picker
							class="picker"
							:value="formData.status"
							:range="statusOptions"
							range-key="label"
							@change="onStatusChange"
						>
							<view class="picker-text">
								{{ getStatusLabel(formData.status) }}
							</view>
						</picker>
					</view>
				</view>

				<view class="modal-footer">
					<button class="cancel-btn" @click="closeModal">取消</button>
					<button class="submit-btn" @click="submitForm">确定</button>
				</view>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<view class="confirm-modal" v-if="showDeleteModal">
			<view class="confirm-content">
				<text class="confirm-title">确认删除</text>
				<text class="confirm-text">确定要删除这个轮播图吗？删除后无法恢复。</text>
				<view class="confirm-actions">
					<button class="cancel-btn" @click="showDeleteModal = false">取消</button>
					<button class="delete-btn" @click="confirmDelete">确定删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getApiUrl, getRequestConfig } from '@/config/api.js'
import { API_CONFIG } from '@/config/api.js'

export default {
	data() {
		return {
			bannerList: [],
			showModal: false,
			showDeleteModal: false,
			isEdit: false,
			editingId: null,
			formData: {
				imageUrl: '',
				imageName: '',
				sortOrder: 1,
				status: 1
			},
			statusOptions: [
				{ value: 1, label: '上架' },
				{ value: 0, label: '下架' }
			]
		}
	},
	onLoad() {
		this.checkAdminPermission()
		this.loadBannerList()
	},
	methods: {
		checkAdminPermission() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || userInfo.role !== 1) {
				uni.showToast({
					title: '无权限访问',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
				return
			}
		},

		async loadBannerList() {
			try {
				const token = uni.getStorageSync('token')
				const config = getRequestConfig(token, 'GET')

				const response = await uni.request({
					url: getApiUrl(API_CONFIG.ENDPOINTS.BANNER_ALL),
					...config
				})

				if (response.statusCode === 200 && response.data.code === 200) {
					let bannerList = response.data.data || []

					// 处理图片URL，确保是完整的URL
					bannerList = bannerList.map(banner => {
						if (banner.imageUrl && !banner.imageUrl.startsWith('http')) {
							banner.imageUrl = getApiUrl('').replace('/api', '') + banner.imageUrl
						}
						return banner
					})

					this.bannerList = bannerList
				} else {
					// 检查是否是token过期
					if (response.data.code === 401 || response.data.message?.includes('token') || response.data.message?.includes('认证')) {
						uni.showModal({
							title: '登录已过期',
							content: '请重新登录',
							showCancel: false,
							success: () => {
								// 清除token并跳转到登录页
								uni.removeStorageSync('token')
								uni.removeStorageSync('userInfo')
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}
						})
						return
					}
					
					uni.showToast({
						title: response.data.message || '获取轮播图列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取轮播图列表失败:', error)
				
				// 检查是否是网络错误或token问题
				if (error.errMsg && (error.errMsg.includes('401') || error.errMsg.includes('token'))) {
					uni.showModal({
						title: '登录已过期',
						content: '请重新登录',
						showCancel: false,
						success: () => {
							// 清除token并跳转到登录页
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
					return
				}
				
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},

		showAddModal() {
			this.isEdit = false
			this.editingId = null
			this.resetForm()
			this.showModal = true
		},

		editBanner(banner) {
			this.isEdit = true
			this.editingId = banner.id

			// 处理图片URL，确保是完整的URL
			let imageUrl = banner.imageUrl
			if (imageUrl && !imageUrl.startsWith('http')) {
				// 如果是相对路径，添加基础URL
				imageUrl = getApiUrl('').replace('/api', '') + imageUrl
			}

			this.formData = {
				imageUrl: imageUrl,
				imageName: banner.imageName || '',
				sortOrder: banner.sortOrder,
				status: banner.status
			}
			this.showModal = true
		},

		closeModal() {
			this.showModal = false
			this.resetForm()
		},

		resetForm() {
			this.formData = {
				imageUrl: '',
				imageName: '',
				sortOrder: 1,
				status: 1
			}
		},

		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.uploadImage(res.tempFilePaths[0])
				}
			})
		},

		async uploadImage(filePath) {
			try {
				uni.showLoading({ title: '上传中...' })

				const token = uni.getStorageSync('token')
				const uploadResult = await uni.uploadFile({
					url: getApiUrl(API_CONFIG.ENDPOINTS.UPLOAD_BANNER),
					filePath: filePath,
					name: 'file',
					formData: {
						imageName: this.formData.imageName || '轮播图',
						sortOrder: this.formData.sortOrder,
						status: this.formData.status
					},
					header: {
						'Authorization': `Bearer ${token}`
					}
				})

				uni.hideLoading()

				const result = JSON.parse(uploadResult.data)
				console.log('后端返回的原始数据:', result)

				if (result.code === 200) {
					// 直接使用后端返回的图片URL
					let imageUrl = result.data.imageUrl
					console.log('原始图片URL:', imageUrl)

					// 如果是相对路径，添加基础URL
					if (imageUrl && !imageUrl.startsWith('http')) {
						imageUrl = getApiUrl('').replace('/api', '') + imageUrl
						console.log('处理后的图片URL:', imageUrl)
					}

					this.formData.imageUrl = imageUrl
					this.formData.imageName = result.data.imageName

					// 添加调试信息
					console.log('上传成功，图片URL:', imageUrl)
					console.log('formData:', this.formData)

					uni.showToast({
						title: '图片上传成功',
						icon: 'success'
					})

					// 无论是添加模式还是编辑模式，都等待用户点击确定按钮
					if (!this.isEdit) {
						uni.showToast({
							title: '图片已上传，请点击确定完成添加',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: '图片已更新，请点击确定保存修改',
							icon: 'none',
							duration: 2000
						})
					}
				} else {
					console.error('上传失败:', result)
					
					// 检查是否是token过期
					if (result.code === 401 || result.message?.includes('token') || result.message?.includes('认证')) {
						uni.showModal({
							title: '登录已过期',
							content: '请重新登录',
							showCancel: false,
							success: () => {
								// 清除token并跳转到登录页
								uni.removeStorageSync('token')
								uni.removeStorageSync('userInfo')
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}
						})
						return
					}
					
					uni.showToast({
						title: result.message || '上传失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.hideLoading()
				console.error('上传图片失败:', error)
				
				// 检查是否是网络错误或token问题
				if (error.errMsg && (error.errMsg.includes('401') || error.errMsg.includes('token'))) {
					uni.showModal({
						title: '登录已过期',
						content: '请重新登录',
						showCancel: false,
						success: () => {
							// 清除token并跳转到登录页
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
					return
				}
				
				uni.showToast({
					title: '上传失败，请重试',
					icon: 'none'
				})
			}
		},

		onStatusChange(e) {
			const index = e.detail.value
			this.formData.status = this.statusOptions[index].value
		},

		getStatusLabel(status) {
			const option = this.statusOptions.find(item => item.value === status)
			return option ? option.label : '上架'
		},

		async submitForm() {
			// 检查是否有图片
			if (!this.formData.imageUrl) {
				uni.showToast({
					title: '请选择图片',
					icon: 'none'
				})
				return
			}

			// 检查图片名称
			if (!this.formData.imageName.trim()) {
				uni.showToast({
					title: '请输入图片名称',
					icon: 'none'
				})
				return
			}

			try {
				if (this.isEdit) {
					// 编辑模式：调用更新接口
					const token = uni.getStorageSync('token')
					const config = getRequestConfig(token, 'PUT')

					// 准备更新的数据
					const updateData = {
						imageName: this.formData.imageName.trim(),
						sortOrder: this.formData.sortOrder,
						status: this.formData.status
					}

					// 如果上传了新图片，包含新的图片URL
					if (this.formData.imageUrl && this.formData.imageUrl !== '') {
						updateData.imageUrl = this.formData.imageUrl
					}

					const response = await uni.request({
						url: getApiUrl(`${API_CONFIG.ENDPOINTS.BANNER_UPDATE}/${this.editingId}`),
						data: updateData,
						...config
					})

					if (response.statusCode === 200 && response.data.code === 200) {
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						})
						this.closeModal()
						this.loadBannerList()
					} else {
						uni.showToast({
							title: response.data.message || '更新失败',
							icon: 'none'
						})
					}
				} else {
					// 添加模式：图片上传时已经保存到数据库，这里只需要关闭弹窗并刷新列表
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					this.closeModal()
					this.loadBannerList()
				}
			} catch (error) {
				console.error('提交表单失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},

		async toggleBannerStatus(id) {
			try {
				const token = uni.getStorageSync('token')
				const config = getRequestConfig(token, 'PUT')

				const response = await uni.request({
					url: getApiUrl(`${API_CONFIG.ENDPOINTS.BANNER_TOGGLE}/${id}`),
					...config
				})

				if (response.statusCode === 200 && response.data.code === 200) {
					uni.showToast({
						title: '状态切换成功',
						icon: 'success'
					})
					this.loadBannerList()
				} else {
					uni.showToast({
						title: response.data.message || '操作失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('切换状态失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},

		deleteBanner(id) {
			this.editingId = id
			this.showDeleteModal = true
		},

		async confirmDelete() {
			try {
				const token = uni.getStorageSync('token')
				const config = getRequestConfig(token, 'DELETE')

				// 先获取要删除的轮播图信息
				const bannerToDelete = this.bannerList.find(banner => banner.id === this.editingId)
				if (!bannerToDelete) {
					uni.showToast({
						title: '轮播图不存在',
						icon: 'none'
					})
					return
				}

				// 删除数据库记录
				const response = await uni.request({
					url: getApiUrl(`${API_CONFIG.ENDPOINTS.BANNER_DELETE}/${this.editingId}`),
					...config
				})

				if (response.statusCode === 200 && response.data.code === 200) {
					// 删除文件
					try {
						// 从图片URL中提取文件名
						const imageUrl = bannerToDelete.imageUrl
						if (imageUrl) {
							let fileName = ''

							// 处理不同的URL格式
							if (imageUrl.includes('/images/banner/')) {
								// 相对路径格式：/images/banner/filename.jpg
								fileName = imageUrl.split('/images/banner/').pop()
							} else if (imageUrl.includes('images/banner/')) {
								// 绝对路径格式：http://localhost:8080/images/banner/filename.jpg
								fileName = imageUrl.split('images/banner/').pop()
							} else {
								// 直接是文件名
								fileName = imageUrl.split('/').pop()
							}

							if (fileName) {
								// 调用文件删除接口
								const fileDeleteResponse = await uni.request({
									url: getApiUrl(`/api/upload/banner/${fileName}`),
									method: 'DELETE',
									header: {
										'Authorization': `Bearer ${token}`
									}
								})

								if (fileDeleteResponse.statusCode !== 200) {
									console.warn('文件删除失败，但数据库记录已删除')
								}
							}
						}
					} catch (fileError) {
						console.warn('删除文件时出错:', fileError)
						// 文件删除失败不影响数据库删除的成功提示
					}

					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					this.showDeleteModal = false
					this.loadBannerList()
				} else {
					uni.showToast({
						title: response.data.message || '删除失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('删除失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},

		formatDate(dateString) {
			if (!dateString) return ''
			const date = new Date(dateString)
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
		},

		/*async testApiConnection() {
			try {
				const token = uni.getStorageSync('token')
				const config = getRequestConfig(token, 'GET')

				const response = await uni.request({
					url: getApiUrl(API_CONFIG.ENDPOINTS.BANNER_ALL),
					...config
				})

				if (response.statusCode === 200 && response.data.code === 200) {
					uni.showToast({
						title: 'API连接成功！',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: response.data.message || 'API连接失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('测试API连接失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		}*/
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding: 20rpx;
}

.header-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;

	.header-info {
		.header-title {
			display: block;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.header-subtitle {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}

	.header-actions {
		display: flex;
		gap: 20rpx;

		.test-btn {
			background: #4CAF50;
			color: #FFFFFF;
			border: none;
			border-radius: 44rpx;
			padding: 20rpx 40rpx;
			font-size: 28rpx;
		}

		.add-btn {
			background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
			color: #FFFFFF;
			border: none;
			border-radius: 44rpx;
			padding: 20rpx 40rpx;
			font-size: 28rpx;
		}
	}
}

.banner-list {
	.banner-item {
		background: #1a1f2e;
		border-radius: 16rpx;
		border: 1rpx solid #2a2f3e;
		margin-bottom: 20rpx;
		overflow: hidden;

		.banner-preview {
			position: relative;
			height: 300rpx;

			.banner-image {
				width: 100%;
				height: 100%;
			}

			.banner-overlay {
				position: absolute;
				top: 20rpx;
				right: 20rpx;

				.banner-status {
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;

					&.active {
						background: rgba(76, 175, 80, 0.2);
						color: #4CAF50;
						border: 1rpx solid #4CAF50;
					}

					&.inactive {
						background: rgba(158, 158, 158, 0.2);
						color: #9E9E9E;
						border: 1rpx solid #9E9E9E;
					}
				}
			}
		}

		.banner-info {
			padding: 30rpx;

			.banner-details {
				margin-bottom: 20rpx;

				.banner-name {
					display: block;
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-bottom: 8rpx;
				}

				.banner-order {
					display: block;
					font-size: 24rpx;
					color: #AAB4BE;
					margin-bottom: 4rpx;
				}

				.banner-time {
					font-size: 24rpx;
					color: #AAB4BE;
				}
			}

			.banner-actions {
				display: flex;
				gap: 20rpx;

				.action-btn {
					flex: 1;
					padding: 16rpx;
					border-radius: 12rpx;
					font-size: 24rpx;
					border: none;

					&.edit-btn {
						background: #2a2f3e;
						color: #00B8D4;
						border: 1rpx solid #00B8D4;
					}

					&.toggle-btn {
						background: #2a2f3e;
						color: #FF9800;
						border: 1rpx solid #FF9800;
					}

					&.delete-btn {
						background: rgba(244, 67, 54, 0.2);
						color: #f44336;
						border: 1rpx solid #f44336;
					}
				}
			}
		}
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;

	.modal-content {
		background: #1a1f2e;
		border-radius: 20rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow-y: auto;

		.modal-header {
			padding: 30rpx;
			border-bottom: 1rpx solid #2a2f3e;
			position: relative;

			.modal-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.close-btn {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.close-icon {
					font-size: 32rpx;
					color: #AAB4BE;
				}
			}
		}

		.modal-body {
			padding: 30rpx;

			.upload-section {
				margin-bottom: 30rpx;

				.upload-area {
					border: 2rpx dashed #3a3f4e;
					border-radius: 12rpx;
					padding: 60rpx 20rpx;
					text-align: center;

					.upload-icon {
						display: block;
						font-size: 60rpx;
						margin-bottom: 20rpx;
					}

					.upload-text {
						display: block;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-bottom: 10rpx;
					}

					.upload-tip {
						font-size: 24rpx;
						color: #AAB4BE;
					}
				}

				.image-preview {
					position: relative;

					.preview-image {
						width: 100%;
						height: 300rpx;
						border-radius: 12rpx;
					}

					.image-actions {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;

						.change-btn {
							background: rgba(0, 0, 0, 0.7);
							color: #FFFFFF;
							border: none;
							border-radius: 20rpx;
							padding: 10rpx 20rpx;
							font-size: 24rpx;
						}
					}
				}
			}

			.form-item {
				margin-bottom: 30rpx;

				.label {
					display: block;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-bottom: 16rpx;
				}

				.input {
					width: 100%;
					height: 80rpx;
					background: #2a2f3e;
					border-radius: 12rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border: 1rpx solid #3a3f4e;
				}

				.picker {
					width: 100%;
					height: 80rpx;
					background: #2a2f3e;
					border-radius: 12rpx;
					border: 1rpx solid #3a3f4e;
					display: flex;
					align-items: center;
					padding: 0 24rpx;

					.picker-text {
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.modal-footer {
			padding: 30rpx;
			border-top: 1rpx solid #2a2f3e;
			display: flex;
			gap: 20rpx;

			.cancel-btn, .submit-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				border: none;
			}

			.cancel-btn {
				background: #2a2f3e;
				color: #AAB4BE;
				border: 1rpx solid #3a3f4e;
			}

			.submit-btn {
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				color: #FFFFFF;
			}
		}
	}
}

.confirm-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;

	.confirm-content {
		background: #1a1f2e;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 80%;
		max-width: 500rpx;
		text-align: center;

		.confirm-title {
			display: block;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.confirm-text {
			display: block;
			font-size: 28rpx;
			color: #AAB4BE;
			margin-bottom: 40rpx;
			line-height: 1.5;
		}

		.confirm-actions {
			display: flex;
			gap: 20rpx;

			.cancel-btn, .delete-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				border: none;
			}

			.cancel-btn {
				background: #2a2f3e;
				color: #AAB4BE;
				border: 1rpx solid #3a3f4e;
			}

			.delete-btn {
				background: rgba(244, 67, 54, 0.2);
				color: #f44336;
				border: 1rpx solid #f44336;
			}
		}
	}
}

.placeholder {
	color: #AAB4BE;
}
</style>
